import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Cell, Button, Dialog, Switch, Toast } from "@nutui/nutui-react";
import { useDispatch, useSelector } from "react-redux";
import { logoutUser } from "@/store/actions/userActions";
import {
  ArrowLeft,
  Close,
} from "@nutui/icons-react";
import "./index.less";

const SettingsView = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const userInfo = useSelector((state) => state.user.userInfo);
  const [showLogoutDialog, setShowLogoutDialog] = useState(false);

  // 处理返回
  const handleBack = () => {
    navigate('/user');
  };

  // 处理退出登录
  const handleLogout = () => {
    setShowLogoutDialog(true);
  };

  // 确认退出登录
  const confirmLogout = () => {
    dispatch(logoutUser());
    setShowLogoutDialog(false);
    navigate('/login');
  };

  // 设置菜单数据
  const settingsGroups = [
    {
      title: "账户",
      items: [
        {
          title: "退出登录",
          icon: <Close />,
          onClick: handleLogout,
          danger: true,
        },
      ],
    },
  ];

  return (
    <div className="settings-page">
      {/* 头部导航 */}
      <div className="settings-header">
        <div className="header-left" onClick={handleBack}>
          <ArrowLeft />
        </div>
        <div className="header-title">设置</div>
        <div className="header-right"></div>
      </div>

      {/* 设置内容 */}
      <div className="settings-content">
        {settingsGroups.map((group, groupIndex) => (
          <div key={groupIndex} className="settings-group">
            <div className="group-title">{group.title}</div>
            <div className="group-items">
              {group.items.map((item, itemIndex) => (
                <Cell
                  key={itemIndex}
                  title={item.title}
                  icon={item.icon}
                  className={`settings-item ${item.danger ? 'danger' : ''}`}
                  onClick={item.onClick}
                  right={item.right}
                />
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* 退出登录确认对话框 */}
      <Dialog
        title="确认退出"
        content="确定要退出登录吗？"
        visible={showLogoutDialog}
        onConfirm={confirmLogout}
        onCancel={() => setShowLogoutDialog(false)}
        confirmText="确认"
        cancelText="取消"
      />
    </div>
  );
};

export default SettingsView;
